<template>
  <ScenicScreen
    v-model="list.filter.scenicId"
    @change="selectScenic"
    :isAll="false"
  >
    <div class="app-container">
      <el-form
        ref="listFilterRef"
        :model="list.filter"
        inline
        class="list-filter"
      >
        <el-form-item prop="spotType">
          <KiSelect
            v-model="list.filter.spotType"
            :options="dict.spot_type"
            placeholder="点位类型"
          />
        </el-form-item>
        <el-form-item prop="name">
          <el-input v-model="list.filter.name" placeholder="点位名称" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form>

      <div class="table-operation">
        <span>
          <el-button
            v-if="hasBtn['新增']"
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="
              () => {
                this.form.data.longitude = this.curScenic.longitude
                this.form.data.latitude = this.curScenic.latitude
                this.c()
              }
            "
          >
            新增
          </el-button>
        </span>
        <el-pagination
          v-bind="elPaginationProps"
          :total="list.total"
          :currentPage.sync="list.filter.pageNo"
          :pageSize.sync="list.filter.pageSize"
        />
      </div>

      <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
        <el-table-column align="center" type="index" />
        <el-table-column label="点位名称" prop="name" />
        <el-table-column label="点位类型" prop="spotTypeName" />
        <el-table-column label="讲解语音">
          <template slot-scope="{ row }">
            <el-tag v-if="row.hasVoice === 1" type="success">有</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="首页展示">
          <template
            slot-scope="scope"
            v-if="scope.row.homeDisplayStatus !== null"
          >
            <el-tag :type="['info', 'success'][scope.row.homeDisplayStatus]">
              {{ ['否', '是'][scope.row.homeDisplayStatus] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="首页序号" prop="homeDisplaySort" />
        <el-table-column label="状态" align="center">
          <template slot-scope="{ row: { id, status } }">
            <KiPopSwitch
              v-bind="popSwitchProps(status)"
              @change="updateStatus({ id, status: status ^ 1 })"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <KiPopButton
              v-if="hasBtn['查看']"
              @click="r({ id: row.id })"
            >
              查看
            </KiPopButton>
            <KiPopButton
              v-if="hasBtn['语音上传'] && row.status === 1"
              @click="showVoice(row.id)"
            >
              语音上传
            </KiPopButton>
            <KiPopButton
              v-if="hasBtn['编辑']"
              @click="u({ id: row.id })"
            >
              编辑
            </KiPopButton>
            <KiPopButton
              v-if="hasBtn['删除']" text="![#FF7575]"
              :elPopconfirmProps="{ title: '确认删除吗？' }"
              @click="d({ id: row.id })"
            >
              删除
            </KiPopButton>
          </template>
        </el-table-column>
      </el-table>

      <KiFormDialog
        :show.sync="form.show"
        :title="formTitle"
        v-model="form.data"
        :submit="submitForm"
        :readonly="form.status === 'r'"
        ref="formRef"
        :loading="form.loading"
      >
        <template #el-form>
          <el-form-item label="点位名称" prop="name" verify>
            <el-input
              v-model="form.data.name"
              maxlength="30"
              placeholder="请输入点位名称"
              show-word-limit
              clearable
            />
          </el-form-item>
          <el-form-item label="点位类型" prop="spotType" verify>
            <KiSelect v-model="form.data.spotType" :options="dict.spot_type" />
          </el-form-item>
          <transition name="slide-fade">
            <el-form-item
              v-if="form.data.spotType === '01'"
              label="景点首页展示"
              prop="homeDisplayStatus"
              verify
            >
              <el-switch
                v-model="form.data.homeDisplayStatus"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
              ></el-switch>
            </el-form-item>
          </transition>
          <transition name="slide-fade">
            <el-form-item
              v-if="
                form.data.spotType === '01' && form.data.homeDisplayStatus === 1
              "
              label="景点首页序号"
              prop="homeDisplaySort"
              verify
            >
              <Sort
                v-model="form.data.homeDisplaySort"
                :max="10"
                placeholder="请输入景点首页序号"
              />
            </el-form-item>
          </transition>
          <el-form-item
            label="封面图片"
            prop="image"
            :verify="{ required: form.data.spotType === '01' }"
          >
            <Imgpond
              :count="1"
              v-model="form.data.image"
              aspectRatio="153/140"
            />
          </el-form-item>
          <el-form-item label="详情视频" prop="video">
            <Filepool v-model="form.data.video" :count="1" fileType="video" />
          </el-form-item>
          <el-form-item label="详情主图" prop="pictures">
            <Imgpond
              :count="10"
              v-model="form.data.pictures"
              valueType="array"
            />
          </el-form-item>
          <el-form-item label="简介" prop="intro" verify>
            <el-input
              v-model="form.data.intro"
              placeholder="请输入简介"
              clearable
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="点位所在位置" verify class="coordinate">
            <el-button @click="showCoordPicker = true" type="info">
              选择定位
            </el-button>
            <el-form-item prop="longitude" verify>
              <el-input
                v-model="form.data.longitude"
                placeholder="经度"
                clearable
              />
            </el-form-item>
            <el-form-item prop="latitude" verify>
              <el-input
                v-model="form.data.latitude"
                placeholder="纬度"
                clearable
              />
            </el-form-item>
            <CoordPicker
              :show.sync="showCoordPicker"
              :lng.sync="form.data.longitude"
              :lat.sync="form.data.latitude"
              :address="curScenic.name"
            />
          </el-form-item>
          <el-form-item label="图文详情" prop="content">
            <MiniMCE
              v-model="form.data.content"
              :disabled="form.status === 'r'"
            />
          </el-form-item>
        </template>
      </KiFormDialog>

      <KiFormDialog
        :show.sync="voice.show"
        title="点位语音管理"
        v-model="voice.data"
        :retrieve="voiceGetter"
        :submit="voiceSubmit"
        :elFormProps="{ labelWidth: '80px' }"
      >
        <template #el-form>
          <draggable
            v-model="voice.data.voiceList"
            :animation="500"
            filter="input,textarea,.el-rate"
            :preventOnFilter="false"
          >
            <div
              v-for="(item, index) of voice.data.voiceList"
              :key="item.id || item.__key"
            >
              <div class="round" cursor="move">
                <i
                  class="el-icon-circle-close"
                  @click="voice.data.voiceList.splice(index, 1)"
                />
                <el-form-item
                  label="语音名称"
                  :prop="'voiceList.' + index + '.name'"
                  verify
                >
                  <el-input
                    v-model="item.name"
                    placeholder="请输入语音名称"
                    maxlength="30"
                    show-word-limit
                    clearable
                  />
                </el-form-item>
                <el-form-item
                  label="排序"
                  :prop="'voiceList.' + index + '.sort'"
                  verify
                >
                  <Sort v-model="item.sort" :max="10" />
                </el-form-item>
                <el-form-item
                  label="文件上传"
                  :prop="'voiceList.' + index + '.url'"
                  verify
                >
                  <Filepool
                    v-model="item.url"
                    :count="1"
                    fileType="audio"
                    ref="filepool"
                  />
                </el-form-item>
              </div>
            </div>
          </draggable>
          <el-button
            @click="voice.data.voiceList.push({ __key: uuidv4() })"
            style="width:100%"
            round
            plain
            type="primary"
            :disabled="
              ($refs.filepool && $refs.filepool.progress < 1) ||
                voice.data.voiceList.length >= 10
            "
          >
            + 添加语音
          </el-button>
        </template>
      </KiFormDialog>
    </div>
  </ScenicScreen>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import ScenicScreen from '@/components/ScenicScreen'
import draggable from 'vuedraggable'
import { v4 as uuidv4 } from 'uuid'

export default {
  mixins: [pageMixin],
  components: { ScenicScreen, draggable },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/scenic/spot',
      axiosConfig: {
        getList: {
          url: 'list'
        },
        r: config => ({
          url: config.id,
          method: 'GET'
        }),
        d: {
          method: 'DELETE'
        }
      },
      form: {
        data: {
          longitude: null,
          latitude: null,
          __qrcode: ''
        }
      }
    }, {
      afterRetrieve(res) {
        this.form.data.__qrcode = JSON.stringify({
          scenicId: this.list.filter.scenicId,
          spotId: res.data.id
        })
      },
      beforeSubmit() {
        if (this.form.status === 'c') {
          this.form.data.scenicId = this.list.filter.scenicId
        }
      },
    }),
  created () {},
  data () {
    return {
      showCoordPicker: false,
      curScenic: {},
      voice: {
        show: false,
        data: {
          voiceList: []
        }
      }
    }
  },
  methods: {
    uuidv4,
    showVoice (id) {
      this.voice.data.spotId = id
      this.voice.show = true
    },
    voiceGetter () {
      return this.$POST('sot-admin-api/scenic/spot/querySpotVoice', {
        spotId: this.voice.data.spotId
      }).then(({ data }) => {
        this.voice.data.voiceList = data || {}
      })
    },
    voiceSubmit () {
      return this.$POST(
        'sot-admin-api/scenic/spot/saveSpotVoice',
        this.voice.data
      ).finally(() => {
        this.getList()
      })
    },
    selectScenic (scenicId, scenicItem) {
      if (scenicItem) {
        this.curScenic = {}
        let { longitude, latitude, name, areaCode } = scenicItem
        this.curScenic = { longitude, latitude, name, areaCode }
        this.form.data.longitude = longitude
        this.form.data.latitude = latitude
        // this.getList()
      }
    },
  }
}
</script>

<style scoped lang="scss">
.app-container {
  & :deep(.el-menu) {
    overflow-y: scroll;
  }

  :deep(.coordinate) {
    .el-form-item__content {
      display: flex;
      justify-content: space-between;

      &:before,
      &:after {
        display: none;
      }

      .el-form-item {
        flex: 1;
      }

      .el-form-item:first-of-type {
        margin: 0 16px;
      }
    }
  }
}

.round {
  border: 1px solid lightgrey;
  border-radius: 16px;
  margin-bottom: 16px;
  padding: 16px;
  position: relative;

  .el-icon-circle-close {
    position: absolute;
    font-size: 32px;
    right: -10px;
    top: -10px;
    cursor: pointer;
  }
}

.qrCode-box {
  width: 240px;
  padding: 10px;
  margin: 20px auto;
  text-align: center;
  background-color: #fff;

  h3 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.export-img-link {
  display: none;
  width: 240px;
  height: 274px;

  .export-img {
    width: 100%;
    height: 100%;
  }
}
</style>
